<template>
	<!-- 推荐 -->
	<!-- <p class="recommend">推荐</p> -->
	<div class="Mainstream-view global-display global-a-items" v-if="newestTravel.length > 0">
	  <!-- 左边 -->
		<div class="Mainstream-left" @click="juMP(newestTravel[int]._id)">
	    <img class="Mainstream-left-image fadeIn" :src="newestTravel[int].cover_image.url">
	    <div class="Mainstream-bottom">
	      <p class="m-title text-show">{{newestTravel[int].title}}</p>
	      <div class="global-display global-a-items" v-for="(item,index) in newestTravel[int].author_data">
	      <img :src="item.avatarUrl">
	      <p class="m-name">{{item.nickname}}</p>
			<p class="m-name text-show dis-flex">我在&nbsp;{{newestTravel[int].address}}</p>
	      </div>
	    </div>
	  </div>
		<!-- 右边 -->
	  <div class="Mainstream-right global-display global-f-direction">
			<img v-for="(item,index) in newestTravel" :key="index" :src="item.cover_image.url"
			:class="{img_border:index == int}"
			 @click="recoMmend(index)"
			>
	  </div>
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	defineProps({newestTravel:Array})
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	// 切换推荐
	const int = ref(0)
	function recoMmend(index){
		int.value = index
	}
	// 推荐跳转
	function juMP(_id){
		$router.push({path: '/details-page', query: {_id}})
	}
</script>

<style scoped>
.recommend{
  font-size: 17px;
  font-weight: bold;
  margin: 10px;
}
.Mainstream-view{
  margin: 10px;
  height: 200px;
  border-radius: 5px;
  background-color: #7d89b9;
  overflow: hidden;
}
.Mainstream-left{
  position: relative;
  flex: 1;
  height: 200px;
}
.Mainstream-left-image{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.Mainstream-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  padding: 0 0 10px 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.Mainstream-bottom img{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.m-title{
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
.m-name{
  padding-left: 8px;
  font-size: 12px;
}
.dis-flex{
	flex: 1;
}
.Mainstream-right{
	gap: 8px;
	margin: 0 8px;
}
.Mainstream-right img{
	display: block;
	width: 60px;
	height: 40px;
	object-fit: cover;
	border-radius: 3px;
}
.img_border{
	border: 2px solid yellow;
	box-sizing: border-box;
}
</style>